<template>
  <div class="select-number" v-if="!getIsPhone">
    <sub-header class="sub-header"></sub-header>
    <router-view></router-view>
    <info-tip 
      :showInfoTip="showInfoTip" 
      @click="hideInfoTip"
      :selectedQuantity="getBuyingQuantity"
    ></info-tip>
  </div>
  <div v-else class="select-number-phone">
    <header-template-phone>
      <template v-slot:left>
        <header-back></header-back>
      </template>
      <template v-slot:center>
        <div style="fontSize: 15px;">
          {{getLotteryType.lotteryName}}
        </div>
      </template>
      <template v-slot:right>
        <header-more @hide="hideSideSliderMore"></header-more>
      </template>
    </header-template-phone>
    <!-- <lottery-header-phone @click="unfoldSlider"></lottery-header-phone> -->
    <div class="main" ref="main">
      <router-view></router-view>
    </div>
    <quantity-and-balance></quantity-and-balance>
    <lottery-footer-phone 
      @click="showAddToCartPopup" 
      @buy-now="showBuyNowPopup"
      @order-confirm="showOrderConfirmation"
      >
    </lottery-footer-phone>
    <transition name="fade">
      <add-to-cart-phone 
        v-show="showAddToCart" 
        class="popup"
        @click="hideAddToCartPopup"
      ></add-to-cart-phone>
    </transition>
    <transition name="fade">
      <buy-now-phone 
        class="popup" 
        v-show="showBuyNow" 
        @click="hideBuyNowPopup">
      </buy-now-phone>
    </transition>
    <info-tip 
      :showInfoTip="showInfoTip" 
      @click="hideInfoTip" 
      :selectedQuantity="getBuyingQuantity">
    </info-tip>
  </div>
</template>

<script>
import SubHeader from '@/components/header/sub-header/sub-header'
import LotteryHeaderPhone from '@/components/base/phone/lottery-header-phone/lottery-header-phone'
import LotteryFooterPhone from '@/components/base/phone/lottery-footer-phone/lottery-footer-phone'
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderBack from '@/components/base/header-back/header-back'
import HeaderMore from '@/components/base/header-more/header-more'
import QuantityAndBalance from '@/components/base/phone/quantity-and-balance/quantity-and-balance'
import AddToCartPhone from '@/components/base/add-to-cart/add-to-cart-phone'
import InfoTip from '@/components/base/info-tip/info-tip'
import BuyNowPhone from '@/components/base/phone/buy-now-phone/buy-now-phone'
// import OrderConfirmation from '@/components/base/phone/order-confirmation/order-confirmation'
import { mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    SubHeader,
    LotteryHeaderPhone,
    LotteryFooterPhone,
    QuantityAndBalance,
    AddToCartPhone,
    InfoTip,
    BuyNowPhone,
    HeaderTemplatePhone,
    HeaderBack,
    HeaderMore
  },
  data() {
    return {
      showSideSlider: false,
      showAddToCart: false,
      showInfoTip: false,
      showBuyNow: false,
      showOrderConfirm: false
    }
  },
  methods: {
    hideOrderConfirmation() {
      this.showOrderConfirm = false
    },
    unfoldSlider(flag) {
      this.showSideSlider = flag
    },
    hideSideSliderMore() {
      this.setSideSliderState(false)
    },
    hideBuyNowPopup(flag) {
      this.showBuyNow = flag
    },
    showBuyNowPopup(flag) {
      this.showBuyNow = flag
    },
    hideAddToCartPopup(flag) {
      this.showAddToCart = flag
    },
    showAddToCartPopup(flag) {
      this.showAddToCart = true
    },
    hideInfoTip(flag) {
      this.showInfoTip = flag
    },
    showOrderConfirmation() {
      this.showOrderConfirm = true
    },
    ...mapMutations('lottery', {
      setSideSliderState: 'SET_SHOW_SIDE_SLIDER'
    })
    
  },
  computed: {
    ...mapGetters('lottery', 
      ['getIsPhone', 'getLotteryType', 'getCurrentCart', 'getBuyingQuantity'])
  },
  watch: {
    'getCurrentCart'(newVal, oldVal) {
      if (newVal.length > oldVal.length) {
        this.showInfoTip = true
      }
    },
    'getBuyingQuantity'(newVal) {
      
    }

  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .select-number
    width 100%
    box-sizing border-box 
    padding-top 128px
    .sub-header 
      position fixed 
      top 0
      left 0 
      right 0
      z-index 99
  @media screen and (max-width 750px) 
    .select-number-phone 
      max-width 750px
      width auto 
      .main 
        box-sizing border-box 
        padding-bottom 74px
      .popup  
        &.fade-enter-active, &.fade-leave-active 
          transition opacity 0.2s 
        &.fade-enter, &.fade-leave-to 
          opacity 0
      .side-slider 
        position absolute 
        top 0
        right 0
        bottom 0 
        width 88%
        background-color #fff
        height 100%
        .slider-content 
          .title
            display flex 
            justify-content space-between 
            width 100% 
            line-height 36px
            box-sizing border-box 
            padding 0 17px
            background $color-text-button
            .icon
              color $color-theme-red
              height 36px
              box-sizing border-box
              .iconfont 
                font-size 19px
                
</style>